<template>
    <div>
        <div class="name-file-item" v-for="(item,index) in value">
            <div class="name-file-item-item">
                <a-input v-model="item[fileName]"  v-bind="$attrs" v-if="delVisible"></a-input>
                <span v-else style="min-width: 100px;">{{item[fileName]}}</span>
            </div>
            <div class="name-file-item-item">
                <a-upload
                        @change="(e)=>{
                            onChange(e,index)
                        }"
                        name="file"
                        v-bind="$attrs"
                        :value="item[filePath]"
                        action="/system/api/upload/file"
                        :showUploadList="false"
                        :accept="accept"
                        v-if="!item[filePath] && delVisible"
                        :beforeUpload="beforeUpload"
                >
                    <a-button :disabled="$attrs.disabled || false"> <a-icon type="upload" />上传文件</a-button> <span style="font-size: 10px;color: #818181;">支持格式: {{accept}}</span>
                    <a-tooltip placement="right" v-if="titleVisible">
                        <template slot="title" >
                            <span>{{title || '我是小提示'}}</span>
                        </template>
                        <a-icon style="margin-left: 16px;color:#1890ff;" type="question-circle" />
                    </a-tooltip>
                </a-upload>
                <div v-else>
                    <span v-if="!item[filePath]">暂无文件</span>
                    <a-button type="primary" v-else>
                        <a :href="item[filePath]" target="_blank">查看文件</a>
                    </a-button>
                    <a-button type="danger" @click="clear(index)" v-if="delVisible" style="margin-left: 16px;">
                        删除文件
                    </a-button>
                </div>
            </div>
            <div class="name-file-item-item" v-if="delVisible">
                <a-button type="primary" @click="addList(index)" v-if="(index + 1)==value.length">
                   添加
                </a-button>
                <a-button type="danger" @click="removeList(index)" v-else>
                    删除
                </a-button>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "xluploadFile",
        data(){
            return{
                fileList:[],
                size:5242880,
                accept:'.pdf, .docx, .doc, .xls, .xlsx,.jpg,.jpeg,.png'
            }
        },
        props: {
            specifications:{
                type:String,
                default:'5242880;.pdf,.docx,.doc,.xls,.xlsx,.jpg,.jpeg,.png'
            },
            value: {
                type:Array,
                default:()=>{
                    return []
                }
            },
            title: String,
            titleVisible:{
                type:Boolean,
                default:false
            },
            delVisible:{
                type:Boolean,
                default:true
            },
            fileName:String,
            filePath:String
        },
        watch:{
            value(){
                if(!this.value.length){

                    this.addList()
                }
            }
        },
        created(){
            if(!this.value.length){
                console.log(this.value.length,1111)
                this.addList()
            }
            if(this.specifications){
                let specifications = this.specifications.split(';')
                this.size = Number(specifications[0])
                this.accept = specifications[1]
            }
        },
        methods: {
            addList(){
              this.value.push({
                  [this.fileName]:'',
                  [this.filePath]:''
              })
            },
            removeList(index){
                this.value.splice(index,1)
            },
            beforeUpload(e){
                if(e.size > this.size){
                    this.$message.error('文件大小超出限制')
                    return false
                }
                let fileAccept = e.name.split('.').pop()
                let accept = this.accept.slice(1).split(',.')
                if(accept.indexOf(fileAccept.toLowerCase()) == -1){
                    this.$message.error('文件格式错误')
                    return false
                }
            },
            onChange (info,index) {
                if (info.file.status === 'done') {
                    if(info.file.response.result.resultCode){
                        if(info.file.response.result.resultCode != '200'){
                            this.$message.error(`${info.file.name} 上传失败`);
                            return
                        }
                    }
                    this.$message.success(`${info.file.name} 文件上传成功`);
                    this.value[index][this.filePath] = info.file.response.result.path
                    this.$emit('change', this.value)
                } else if (info.file.status === 'error') {
                    this.$message.error(`${info.file.name} 上传失败`);
                }
            },
            clear(index){
                this.$confirm({
                    title: '提示',
                    content: '确认删除',
                    onOk: () => {
                        this.value[index][this.filePath] = ''
                        this.$emit('change', this.value)
                    }
                })
            }
        },
        model: {
            prop: 'value',
            event: 'change'
        }
    }
</script>

<style scoped lang="less">
    .name-file-item{
        display: flex;
        align-items: center;
        .name-file-item-item{
            display: flex;
            align-items: center;
            justify-content: space-around;
            margin-right: 16px;
        }
    }
</style>
